<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>聊天记录列表</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link href="/lib/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/lib/css/style.min.css" rel="stylesheet">
</head>
<style>
    .layui-table{
        width: 100%!important;
    }
</style>
<body>
<div class="container-fluid p-t-15">
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看记录</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">进入咨询室</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/lib/layui/layui.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>

<script type="text/javascript" th:inline="none">
    layui.use(['element','jquery','table','layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.jquery;

        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/talklist' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'fromagent', title: '发信人', width:100, align:'left'}
                ,{field: 'toagent', title: '收信人', width:100, sort: true, align:'left'}
                ,{field: 'time', title: '创建时间', width:193, sort: true, align:'left',
                    templet:"<div>{{layui.util.toDateString(d.ordertime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"}
                ,{fixed: 'right', title: '操作',width: 250, align:'left', toolbar: '#barDemo'}
            ]]
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            var id = data.id;
            if(layEvent === 'detail'){
                layer.open({
                    type:2,
                    content:'http://114.116.243.252:8081/record.html',
                    area: ['650px', '700px'],
                })

            } else if(layEvent === 'del'){
                layer.confirm('真的删除经纪人么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    $.ajax({
                        url:"/talkdelete",
                        type:'post',
                        data:{ id:id},
                        datatyp:'json',
                        success:function (message) {
                            if (message.code==0){
                                alert("删除成功！")
                            }else {
                                alert("删除失败！")
                            }
                        }
                    })
                });
            }else if(layEvent === 'edit'){
                layer.open({
                    type: 2,
                    content:'http://114.116.243.252:8081/',
                    area: ['700px', '700px'],
                    end:function (){
                        table.reload('demo');
                    }
                })
            }
        });
    });

</script>
</body>
</html>